<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <th:block th:include="include :: header('快捷入口列表')"/>
    <style>
        .layui-card-body .layui-form {
            margin: auto;
        }
        .layui-form-item {
            margin-bottom: 0px;
        }

    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form id="formId" class="layui-form layui-form-pane">
                <div class="layui-form-item">
                                                        
                    <div class="layui-inline">
                    
                        <label class="layui-form-label">资源页面</label>
                        <div class="layui-input-inline">
                            <input type="text" name="permissionId" placeholder="请输入资源页面"
                                   class="layui-input" />
                        </div>
                    
                    </div>
                                            
                    <div class="layui-inline">
                    
                        <label class="layui-form-label">人员</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userId" placeholder="请输入人员"
                                   class="layui-input" />
                        </div>
                    
                    </div>
                                            
                    <div class="layui-inline">
                    
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-inline">
                            <input type="text" name="sort" placeholder="请输入排序"
                                   class="layui-input" />
                        </div>
                    
                    </div>
                                                        
                    <button class="layui-btn layui-btn-md" lay-submit lay-filter="userPermissionSort-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-md layui-btn-primary" id="formreset">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </form>
            <table id="userPermissionSort-table" lay-filter="userPermissionSort-table"></table>
            <script type="text/html" id="userPermissionSort-toolbar">
                <button sec:authorize="hasPermission('/system/userPermissionSort/add','sys:userPermissionSort:add')"
                        class="layui-btn layui-btn-primary layui-btn-md" lay-event="add">
                    <i class="layui-icon layui-icon-add-1"></i>
                    新增
                </button>
                <button sec:authorize="hasPermission('/system/userPermissionSort/remove','sys:userPermissionSort:del')"
                        class="layui-btn layui-btn-danger layui-btn-md" lay-event="batchRemove">
                    <i class="layui-icon layui-icon-delete"></i>
                    删除
                </button>
            </script>
            <script type="text/html" id="userPermissionSort-bar">
                <button sec:authorize="hasPermission('/system/userPermissionSort/edit','sys:userPermissionSort:edit')"
                        class="layui-btn layui-btn-primary layui-btn-sm" lay-event="edit"><i
                        class="layui-icon layui-icon-edit"></i>
                </button>
                <button sec:authorize="hasPermission('/system/userPermissionSort/remove','sys:userPermissionSort:del')"
                        class="layui-btn layui-btn-danger layui-btn-sm" lay-event="remove"><i
                        class="layui-icon layui-icon-delete"></i>
                </button>
            </script>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script>

    layui.use(['table', 'form', 'jquery', 'dtree', 'dictionary','soulTable'], function () {
        var table = layui.table,
            soulTable = layui.soulTable;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        let dictionary = layui.dictionary;

        let cols = [
            [
                {type: 'checkbox'},
                        {
                            field: 'id',
                            title: '主键'
                        },
                        {
                            field: 'permissionId',
                            title: '资源页面'
                        },
                        {
                            field: 'userId',
                            title: '人员',
                            filter: true,
                            sort:true
                        },
                        {
                            field: 'sort',
                            title: '排序',
                            filter: true,
                            sort:true
                        },
                {title: '操作', toolbar: '#userPermissionSort-bar', align: 'center', width: 130}
            ]
        ]

        table.render({
            elem: '#userPermissionSort-table',
            url: pName + '/system/userPermissionSort/data',
            page: true,
            escape: true,
            cols: cols,
            skin: 'line',
            toolbar: '#userPermissionSort-toolbar',
            defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports']
            ,height: 'full-100'
            ,rowDrag: {/*trigger: 'row',*/ done: function(obj) {
                    // 完成时（松开时）触发
                    // 如果拖动前和拖动后无变化，则不会触发此方法
                    console.log(obj.row) // 当前行数据
                    console.log(obj.cache) // 改动后全表数据
                    console.log(obj.oldIndex) // 原来的数据索引
                    console.log(obj.newIndex) // 改动后数据索引
                }}
            ,done: function () {
                soulTable.render(this)
            }
        });

        table.on('checkbox(userPermissionSort-table)', function(obj){

        });
        table.on('row(userPermissionSort-table)', function (obj) {

        });
        table.on('tool(userPermissionSort-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        table.on('toolbar(userPermissionSort-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        form.on('submit(userPermissionSort-query)', function (data) {
            table.reload('userPermissionSort-table', {where: data.field})
            return false;
        });

        window.refresh = function (param) {
            table.reload('userPermissionSort-table', {where: param});
        }
        $('#formreset').click(function(){
            $('#formId').find('input').val("")
        })
    })
</script>
<script sec:authorize="hasPermission('/system/userPermissionSort/add','sys:userPermissionSort:add')">
    window.add = function () {
        let layerIndex = layer.open({
            type: 2,
            title: '新增快捷入口',
            shade: 0.1,
            maxmin : true,
            area: ['99%', '99%'],
            content: pName + '/system/userPermissionSort/add'
        });
        $(window).on("resize", function () {
            layer.full(layerIndex);
        });
        return false;
    }

</script>
<script sec:authorize="hasPermission('/system/userPermissionSort/edit','sys:userPermissionSort:edit')">
    window.edit = function (obj) {
        let layerIndex = layer.open({
            type: 2,
            title: '修改快捷入口',
            shade: 0.1,
            maxmin : true,
            area: ['99%', '99%'],
            content: pName + '/system/userPermissionSort/edit?id=' + obj.data['id']
        });
        $(window).on("resize", function () {
            layer.full(layerIndex);
        });
        return false;
    }
</script>
<script sec:authorize="hasPermission('/system/userPermissionSort/remove','sys:userPermissionSort:del')">
    window.remove = function (obj) {
        layer.confirm('确定要删除该快捷入口', {icon: 3, title: '提示'}, function (index) {
            layer.close(index);
            let loading = layer.load();
            $.ajax({
                url: pName + "/system/userPermissionSort/remove/" + obj.data['id'],
                dataType: 'json',
                type: 'delete',
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 1) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            obj.del();
                        });
                    } else {
                        layer.alert(result.msg, {icon: 2});
                    }
                }
            })
        });
    }

    window.batchRemove = function (obj) {
        let data = table.checkStatus(obj.config.id).data;
        if (data.length === 0) {
            layer.msg("未选中数据", {icon: 3, time: 1000});
            return false;
        }
        let ids = "";
        for (let i = 0; i < data.length; i++) {
            ids += data[i].id + ",";
        }
        ids = ids.substr(0, ids.length - 1);
        layer.confirm('确定要删除这些快捷入口', {icon: 3, title: '提示'}, function (index) {
            layer.close(index);
            let loading = layer.load();
            $.ajax({
                url: pName + "/system/userPermissionSort/batchRemove",
                dataType: 'json',
                data: {"ids": ids},
                type: 'delete',
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 1) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            table.reload('userPermissionSort-table');
                        });
                    } else {
                        layer.alert(result.msg, {icon: 2});
                    }
                }
            })
        });
    }
</script>
</body>
</html>